{% block component_product_wishlist %}
    {% if productId is not empty %}
        {% set addToWishlistOptions = {
            productId: productId,
            router: {
                add: {
                    afterLoginPath: path('frontend.wishlist.add.after.login', { productId: productId }),
                    path: path('frontend.wishlist.product.add', { productId: productId }),
                },
                remove: {
                    path: path('frontend.wishlist.product.remove', { productId: productId }),
                }
            },
            texts: {
                add: 'listing.addToWishlist'|trans|sw_sanitize,
                remove: 'listing.removeFromWishlist'|trans|sw_sanitize
            },
        } %}

        {% set size = size ?? 'md' %}

        <div class="product-wishlist">
            {% block component_product_wishlist_button %}
                <button
                    class="product-wishlist-{{ productId }} product-wishlist-action{% if appearance == 'circle' %}-circle product-wishlist-btn btn btn-light{% endif %} product-wishlist-not-added product-wishlist-loading z-2"
                    title="{{ 'listing.addToWishlist'|trans|sw_sanitize }}"
                    data-add-to-wishlist="true"
                    data-add-to-wishlist-options="{{ addToWishlistOptions|json_encode }}"
                >
                    {% block component_product_wishlist_icon %}
                        {% sw_icon 'heart-fill' style { class: 'wishlist icon-wishlist-added', size: size } %}
                        {% sw_icon 'heart' style { class: 'wishlist icon-wishlist-not-added', size: size } %}

                        {% if showText %}
                            <span class="product-wishlist-btn-content product-wishlist-btn-content-{{ size }}">
                                {{ 'listing.addToWishlist'|trans|sw_sanitize }}
                            </span>
                        {% endif %}
                    {% endblock %}
                </button>
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}
